<template>
  <div class="middle">
    <!--  页面中部--顶部数据栏     -->
    <div class="data_mid_1">
      <!--  页面中部--顶部数据栏--单个显示块        -->
      <div class="data1" v-for="(item, index) in mid_top" :key="index">
        <div class="data1_img" :style="{background: 'url(' + item.img + ')'}"></div>
        <div class="data1_right">
          <div class="data1_text1">{{ item.text }}</div>
          <div class="data1_text2">
            {{ item.data }}<span class="data1_text5">{{ item.unit }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 帮助   -->
    <div class="el-icon-question" @click="openRule"
         style="position: absolute;z-index: 2;top: 130px;right: 600px;font-size: 18px;color: #ffffff;"></div>
    <!--  地图  -->
    <div class="map" ref="chartMap"/>
    <!--  数据年份下拉选择  -->
    <div class="yearChange">
      <el-select
        size="small"
        v-model="dataYear"
        @visible-change="yearChange"
        @change="searchSelect(dataYear)"
        style="width: 102px;"
        popper-class="selectOption">
        <el-option v-for="item in years" :key="item.value" :label="item.label" :value="item.value"/>
      </el-select>
    </div>
    <el-button type="primary" icon="el-icon-refresh-left" circle size="mini" class="map-rollback"
               @click="mapRollback"></el-button>
    <!--  页面中部--底部数据栏     -->
    <div class="data_mid_2">
      <el-tabs v-model="activeName" @tab-click="handleClick" style="color: #ffffff">
        <el-tab-pane label="工伤认定" name="first">
          <dv-scroll-board :config="configTable_identify" style=" height: 160px;"/>
        </el-tab-pane>
        <el-tab-pane label="工伤鉴定" name="second">
          <dv-scroll-board :config="configTable_identify2" style=" height: 150px;" :style="configTableSty"/>
        </el-tab-pane>
        <el-tab-pane label="工伤结算" name="third">
          <dv-scroll-board :config="configTable_settlement" style=" height: 150px;" :style="configTableSty"/>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!--  弹框(工伤联网结算)  -->
    <el-dialog
      width="1250px"
      :modal="false"
      :show-close="false"
      :visible.sync="gslwjsShow"
      customClass="dialogBox"
    >
      <dv-decoration-3 style="width:250px;height:30px;float: left;position: absolute;z-index: 2;top: 0px;left: -5px"/>
      <dv-decoration-3 style="width:250px;height:30px;float: left;position: absolute;z-index: 2;top: 0px;left: 250px"/>
      <dv-decoration-3 style="width:250px;height:30px;float: left;position: absolute;z-index: 2;top: 0px;right: -5px"/>
      <dv-decoration-3 style="width:250px;height:30px;float: left;position: absolute;z-index: 2;top: 0px;right: 250px"/>
      <dv-border-box-11 title="工伤联网结算" style="width: 1260px;height: 580px;margin-left: -25px;margin-top: -60px">
        <div style="width: 1240px;height: 500px;position: absolute;z-index: 1;top: 55px;left: 10px">
          <dv-scroll-board :config="cooperationHandleMax" style="width: 100%; height: 100%;"/>
        </div>
      </dv-border-box-11>
    </el-dialog>
    <!--  地图弹框  -->
    <el-dialog
      width="1250px"
      :modal="false"
      :show-close="false"
      :visible.sync="mapShow"
      customClass="dialogBox"
    >
      <dv-decoration-3 style="width:250px;height:30px;float: left;position: absolute;z-index: 2;top: 0px;left: -5px"/>
      <dv-decoration-3 style="width:250px;height:30px;float: left;position: absolute;z-index: 2;top: 0px;left: 250px"/>
      <dv-decoration-3 style="width:250px;height:30px;float: left;position: absolute;z-index: 2;top: 0px;right: -5px"/>
      <dv-decoration-3 style="width:250px;height:30px;float: left;position: absolute;z-index: 2;top: 0px;right: 250px"/>
      <dv-border-box-11 title="详情" style="width: 1260px;height: 580px;margin-left: -25px;margin-top: -60px">
        <div style="width: 1240px;height: 500px;position: absolute;z-index: 1;top: 55px;left: 10px">
          <table_mapItem/>
        </div>
      </dv-border-box-11>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import api from "@/api/gs";
import echarts from "echarts";
import subscreen_cases from "./subscreen_cases";
import table_mapItem from "./table_mapItem";

const echartsGl = require('echarts-gl');

export default {
  name: "Part_middle",
  components: {
    subscreen_cases, table_mapItem
  },
  data() {
    return {
      tag: 0,
      activeName: 'first',
      mapPopData: null,
      interval: null,
      clickFlag: false,
      myChart: null,
      years: [],
      // 数据年度
      dataYear: '',
      data: {
        dkxt: {
          name: '多跨协同',
          other: {
            bureau: [
              [{
                text: '统计局',
                num: '11',
                img: require('../assets/data_right_1.png')
              },
                {
                  text: '交通运输局',
                  num: '22',
                  img: require('../assets/data_right_2.png')
                },
                {
                  text: '公安局',
                  num: '31',
                  img: require('../assets/data_right_3.png')
                }],
              [{
                text: '司法局',
                num: '34',
                img: require('../assets/data_right_4.png')
              },
                {
                  text: '财政局',
                  num: '31',
                  img: require('../assets/data_right_5.png')
                },
                {
                  text: '水务局',
                  num: '16',
                  img: require('../assets/data_right_6.png')
                }],
            ],
          }
        },
        map_popUpData: [
          {name: '婺城区', areaCode: '330702', value: 1.2, detail: [123, 123, 123, 123, 8]},
          {name: '金东区', areaCode: '330703', value: 1.2, detail: [123, 123, 123, 123, 8]},
          {name: '永康市', areaCode: '330784', value: 8.9, detail: [472203, 8909, 2090, 5304, 1.1]},
          {name: '武义县', areaCode: '330723', value: 1.2, detail: [123, 123, 123, 123, 8]},
          {name: '浦江县', areaCode: '330726', value: 4.0, detail: [123, 123, 123, 123, 8]},
          {name: '义乌市', areaCode: '330782', value: 1.2, detail: [123, 123, 123, 123, 8]},
          {name: '兰溪市', areaCode: '330781', value: 1.2, detail: [123, 123, 123, 123, 8]},
          {name: '东阳市', areaCode: '330783', value: 5.2, detail: [123, 123, 123, 123, 8]},
          {name: '磐安县', areaCode: '330727', value: 1.2, detail: [123, 123, 123, 123, 8]},
        ]
      },
      mid_top: [
        {
          unit: '',
          text: '预警指数',
          data: 56,
          img: require('../assets/data_mid_1_2.png')
        },
        {
          unit: '%',
          text: '事故率',
          data: 1.1,
          img: require('../assets/data_mid_1_3.png')
        },
        {
          unit: '件',
          text: '案件数',
          data: 5304,
          img: require('../assets/data_mid_1_2.png')
        },
        {
          unit: '人',
          text: '参保人数',
          data: 472203,
          img: require('../assets/data_mid_1_1.png')
        }
      ],
      maps: [
        {
          text: '全域预防',
          img: require('../assets/btn_img2.png'),
          pathName: 'Fund'
        },
        {
          text: '精准智控',
          img: require('../assets/btn_img3.png'),
          pathName: 'CaseAnalysis'
        },
        {
          text: '安心工伤',
          img: require('../assets/btn_img4.png'),
          pathName: ''
        }
      ],
      // 子屏显示标记
      dialogVisible: false,
      // 弹框显示标记(工伤联网结算)
      gslwjsShow: false,
      // 弹框显示标记(地图)
      mapShow: false,
      // 多跨协同
      cooperation: [],
      // 工伤联网结算小轮播表
      cooperationHandle: {
        header: ['姓名 ', '医院', '时间'],
        data: [],
        index: false,
        indexHeader: '序号',
        columnWidth: [80, 200, 100],
        rowNum: 4,
        align: ['left'],
        headerBGC: '#1A293C',
        oddRowBGC: '#023358',
        evenRowBGC: '#041F3A'
      },
      // 工伤认定轮播表
      configTable_identify: {
        header: ['申请人', '受伤害职工', '申请人与受伤害职工关系', '申请人地址', '邮政编号', '联系电话', '申请日期'],
        data: [
          ['李国强', '蔡毅', '劳动关系', '金东区天翼街668号', '321000', '13077877965', '2022.02.05'],
          ['李国强', '蔡毅', '劳动关系', '金东区天翼街668号', '321000', '13077877965', '2022.02.05'],
          ['李国强', '蔡毅', '劳动关系', '金东区天翼街668号', '321000', '13077877965', '2022.02.05'],
          ['李国强', '蔡毅', '劳动关系', '金东区天翼街668号', '321000', '13077877965', '2022.02.05'],
          ['李国强', '蔡毅', '劳动关系', '金东区天翼街668号', '321000', '13077877965', '2022.02.05'],
          ['李国强', '蔡毅', '劳动关系', '金东区天翼街668号', '321000', '13077877965', '2022.02.05'],
        ],
        index: false,
        indexHeader: '#',
        columnWidth: [100, 130, 240, 180, 120, 140, 130],
        rowNum: 4,
        align: ['left'],
        headerBGC: '#1A293C',
        oddRowBGC: '#023358',
        evenRowBGC: '#041F3A'
      },
      // 工伤鉴定轮播表
      configTable_identify2: {
        header: ['姓名', '身份证', '认定受伤部位', '受伤时间', '手机号', '单位名称'],
        data: [
          ['蔡毅全', '330***************8', '食指、无名指', '2022.02.05', '13077877912', '浙江大华股份有限责任公司'],
          ['蔡毅全', '330***************8', '食指、无名指', '2022.02.05', '13077877912', '浙江大华股份有限责任公司'],
          ['蔡毅全', '330***************8', '食指、无名指', '2022.02.05', '13077877912', '浙江大华股份有限责任公司'],
          ['蔡毅全', '330***************8', '食指、无名指', '2022.02.05', '13077877912', '浙江大华股份有限责任公司'],
          ['蔡毅全', '330***************8', '食指、无名指', '2022.02.05', '13077877912', '浙江大华股份有限责任公司'],
          ['蔡毅全', '330***************8', '食指、无名指', '2022.02.05', '13077877912', '浙江大华股份有限责任公司'],
        ],
        index: false,
        indexHeader: '#',
        columnWidth: [100, 220, 180, 130, 150, 250],
        rowNum: 4,
        align: ['left'],
        headerBGC: '#1A293C',
        oddRowBGC: '#023358',
        evenRowBGC: '#041F3A'
      },
      configTable_settlement: {
        header: ['姓名', '身份证', '统筹区', '医院', '时间', '金额'],
        headerHeight: 40,
        data: [
          ['蔡淑芬', '332***************9', '永康市', '浙大永康附属人民医院', '2022.03.05', '18900'],
          ['蔡淑芬', '332***************9', '永康市', '浙大永康附属人民医院', '2022.03.05', '18900'],
          ['蔡淑芬', '332***************9', '永康市', '浙大永康附属人民医院', '2022.03.05', '18900'],
          ['蔡淑芬', '332***************9', '永康市', '浙大永康附属人民医院', '2022.03.05', '18900'],
          ['蔡淑芬', '332***************9', '永康市', '浙大永康附属人民医院', '2022.03.05', '18900'],
          ['蔡淑芬', '332***************9', '永康市', '浙大永康附属人民医院', '2022.03.05', '18900'],
        ],
        index: true,
        indexHeader: '#',
        columnWidth: [50, 100, 220, 100, 220, 150, 100],
        rowNum: 4,
        align: ['left'],
        headerBGC: '#1A293C',
        oddRowBGC: '#023358',
        evenRowBGC: '#041F3A',
        hoverPause: false
      },
      // 工伤结算轮播表
      cooperationHandleMax: {
        header: ['#', '姓名', '身份证', '统筹区', '医院', '时间', '金额'],
        headerHeight: 40,
        data: [],
        index: false,
        indexHeader: '#',
        columnWidth: [80, 120, 280, 120, 320, 150, 100],
        rowNum: 10,
        align: ['left'],
        headerBGC: '#1A293C',
        oddRowBGC: '#023358',
        evenRowBGC: '#041F3A',
        hoverPause: false
      },
      // 轮播表样式
      configTableSty: '',
    }
  },
  created() {
    // 注册金华各县市地图
    echarts.registerMap("jh", require("../../static/jhJson/jh/jinhua.json"));
    echarts.registerMap("wucheng", require("../../static/jhJson/wucheng/wucheng.json"));
    echarts.registerMap("wucheng_chengqu", require("../../static/jhJson/wucheng/wucheng _chengqu.json"));
    echarts.registerMap("jindong", require("../../static/jhJson/jindong/jindong.json"));
    echarts.registerMap("yongkang", require("../../static/jhJson/yongkang/yongkang.json"));
    echarts.registerMap("pujiang", require("../../static/jhJson/pujiang/pujiang.json"));
    echarts.registerMap("panan", require("../../static/jhJson/panan/panan.json"));
    echarts.registerMap("lanxi", require("../../static/jhJson/lanxi/lanxi.json"));
    echarts.registerMap("yiwu", require("../../static/jhJson/yiwu/yiwu.json"));
    echarts.registerMap("dongyang", require("../../static/jhJson/dongyang/dongyang.json"));
    echarts.registerMap("wuyi", require("../../static/jhJson/wuyi/wuyi.json"));
    // 注册金华各县市外轮廓地图
    echarts.registerMap("jhLine", require("../../static/jhJson/jh/jinhua_outline.json"));
    echarts.registerMap("wuchengLine", require("../../static/jhJson/wucheng/wucheng_outline.json"));
    echarts.registerMap("jindongLine", require("../../static/jhJson/jindong/jindong_outline.json"));
    echarts.registerMap("yongkangLine", require("../../static/jhJson/yongkang/yongkang_outline.json"));
    echarts.registerMap("pujiangLine", require("../../static/jhJson/pujiang/pujiang_outline.json"));
    echarts.registerMap("pananLine", require("../../static/jhJson/panan/panan_outline.json"));
    echarts.registerMap("lanxiLine", require("../../static/jhJson/lanxi/lanxi_outline.json"));
    echarts.registerMap("yiwuLine", require("../../static/jhJson/yiwu/yiwu_outline.json"));
    echarts.registerMap("dongyangLine", require("../../static/jhJson/dongyang/dongyang_outline.json"));
    echarts.registerMap("wuyiLine", require("../../static/jhJson/wuyi/wuyi_outline.json"));
  },
  mounted() {
    this.init();
  },
  methods: {
    // 下钻地图还原
    mapRollback() {
      this.clickFlag = false;
      let data = [
        {
          name: '婺城区',
          areaCode: '330702',
          caseCount: 100,
          value: 0,
          accidentRate: 0.0002,
          insured: 200,
          fundInTotal: 100,
          fundOutTotal: 50
        },
        {
          name: '金东区',
          areaCode: '330703',
          caseCount: 100,
          value: 0,
          accidentRate: 0.0002,
          insured: 200,
          fundInTotal: 100,
          fundOutTotal: 50
        },
        {
          name: '永康市',
          areaCode: '330784',
          caseCount: 100,
          value: 70,
          accidentRate: 1.2,
          insured: 200,
          fundInTotal: 100,
          fundOutTotal: 50
        },
        {
          name: '武义县',
          areaCode: '330723',
          caseCount: 100,
          value: 0,
          accidentRate: 1.2,
          insured: 200,
          fundInTotal: 100,
          fundOutTotal: 50
        },
        {
          name: '浦江县',
          areaCode: '330726',
          caseCount: 100,
          value: 0,
          accidentRate: 1.2,
          insured: 200,
          fundInTotal: 100,
          fundOutTotal: 50
        },
        {
          name: '义乌市',
          areaCode: '330782',
          caseCount: 100,
          value: 55,
          accidentRate: 1.2,
          insured: 200,
          fundInTotal: 100,
          fundOutTotal: 50
        },
        {
          name: '兰溪市',
          areaCode: '330781',
          caseCount: 100,
          value: 55,
          accidentRate: 1.2,
          insured: 200,
          fundInTotal: 100,
          fundOutTotal: 50
        },
        {
          name: '东阳市',
          areaCode: '330783',
          caseCount: 100,
          value: 0,
          accidentRate: 1.2,
          insured: 200,
          fundInTotal: 100,
          fundOutTotal: 50
        },
        {
          name: '磐安县',
          areaCode: '330727',
          caseCount: 100,
          value: 0.5,
          accidentRate: 1.2,
          insured: 200,
          fundInTotal: 100,
          fundOutTotal: 50
        },
      ];
      if (this.myChart) {
        this.myChart.dispose();
        this.myChart = null;
      }
      this.echartsMap(data, 'jh', 'jhLine', 1,'jh');
    },
    // 预警指数计分规则说明
    openRule() {
      let message = "" +
        "一、按工伤发生次数计算分数。总分不超过25分。\n" +
        "分数=15*(12-a)/12+次数*3\n" +
        "a=距离现在最近一次工伤发生月\n" +
        "二、按工伤发生率计算分数。总分不超过25分。\n" +
        "0<=工伤发生率<0.6%，分数=0；\n" +
        "0.6%<=工伤发生率<5%，分数=15+(次数-1)*2;\n" +
        "工伤发生率>=5%，分数=10+(次数-1)*5\n" +
        "三、按支出额计算分数。总分不超过20分。\n" +
        "a=52000\n" +
        "支出额<a，分数=0；\n" +
        "a<=支出额<2a，分数=8；\n" +
        "2a<=支出额<3a，分数=9；\n" +
        "3a<=支出额<4a，分数=10；\n" +
        "4a<=支出额<5a，分数=11；\n" +
        "5a<=支出额<6a，分数=12；\n" +
        "6a<=支出额<10a，分数=14；\n" +
        "10a<=支出额<20a，分数=16；\n" +
        "支出额>=20a，分数=20；\n" +
        "四、按案件变化计算分数，总分不超过10分。按照当年工伤案件次数比上一年工伤案件次数有增加的计增长分。\n" +
        "1）增长计10分\n" +
        "2）持平计5分\n" +
        "3）减少不计分\n" +
        "\n" +
        "五、按伤残等级计算分数。总分不超过10分。\n" +
        "1）有工亡或等级1-4级，分数=10；\n" +
        "2）有等级5-6级，分数=10*案件数量*0.5；\n" +
        "3）有等级7-10级，分数=10*案件数量*0.3\n" +
        "六、按支缴比积分。总分不超过10分。\n" +
        "   1）支缴比<1，分数=0\n" +
        "   2）1<=支缴比<1.2，分数=5\n" +
        "   3）1.2<=支缴比<1.5，分数=8\n" +
        "   4）支缴比>=1.5，分数=10\n";
      this.$alert(message, '预警指数计分规则', {
        confirmButtonText: '确定',
      });
    },
    // 初始化
    init() {
      this.initCasesInfo();
      this.yearInit();
      this.getComplexInfo();
    },
    // 动态改变轮播表的高度样式以重新渲染表格，用以解决dataV的渲染问题
    handleClick(tab) {
      if (tab.index == 1) {
        this.configTableSty = 'height: 159px';
      } else {
        this.configTableSty = 'height: 160px';
      }
    },
    // 数据年份初始化
    yearInit() {
      const currentYear = new Date().getFullYear();
      this.dataYear = currentYear - 1;
      this.years.push({value: (currentYear - 1), label: (currentYear - 1) + '年'})
    },
    // 年份下拉的回调
    yearChange() {
      const myDate = new Date()
      const startYear = myDate.getFullYear() - 1 // 起始年份
      const endYear = myDate.getFullYear() // 结束年份
      this.years = [];
      for (let i = startYear; i <= endYear; i++) {
        this.years.push({value: (i), label: (i) + '年'})
      }
    },
    // 当前选择的数据年份
    searchSelect(value) {
      this.$emit('getDataYear', value);
    },
    // 关闭子屏的回调
    closeDialog() {
      this.dialogVisible = false
    },
    //地图配置
    echartsMap(data, mapName, mapLineName, mapSize, special) { // 形参：浮窗数据，地图注册名，地图轮廓注册名，地图尺寸，特殊配置
      let that = this;
      let imgElement = new Image()
      imgElement.src = require('../assets/bg.png')
      let redData = data.filter(item => item.value >= 51)
      let cityPoint = {
        "婺城区": [119.652579, 29.082607],
        "金东区": [119.681264, 29.095835],
        "武义县": [119.819159, 28.896563],
        "浦江县": [119.893363, 29.451254],
        "磐安县": [120.44513, 29.052627],
        "兰溪市": [119.460521, 29.210065],
        "义乌市": [120.074911, 29.306863],
        "东阳市": [120.23334, 29.262546],
        "永康市": [120.036328, 28.895293],
      }
      let colorList = [
        {
          type: 'radial', x: 0.5, y: 0.5, r: 0.7,
          colorStops: [
            {offset: 0, color: 'rgba(255,0,0,0.7)'},
            {offset: 1, color: 'rgba(9,43,90,0.1)'}
          ],
        }, {
          type: 'radial', x: 0.5, y: 0.5, r: 0.7,
          colorStops: [
            {offset: 0, color: 'rgba(255,255,0,0.7)'},
            {offset: 1, color: 'rgba(9,43,90,0.1)'}
          ],
        }, {
          type: 'radial', x: 0.5, y: 0.5, r: 0.7,
          colorStops: [
            {offset: 0, color: 'rgba(0,0,255,0.7)'},
            {offset: 1, color: 'rgba(9,43,90,0.1)'}
          ],
        }, {
          type: 'radial', x: 0.5, y: 0.5, r: 0.7,
          colorStops: [
            {offset: 0, color: 'rgba(60,179,113,0.89)'},
            {offset: 1, color: 'rgba(9,43,90,0.2)'}
          ],
        },
      ]
      let option = {
        visualMap: { // 视觉映射
          pieces: [
            {min: 60, label: '红色区域(>60)', color: colorList[0]},
            {min: 50, max: 60, label: '黄色区域(51~60)', color: colorList[1]},
            {min: 0.1, max: 50, label: '蓝色区域(1~50)', color: colorList[2]},
            {max: 0.1, label: '绿色区域(0)', color: colorList[3]},
          ],
          inRange: {
            symbol: 'circle'
          },
          outOfRange: {
            symbol: 'circle'
          },
          textStyle: {
            color: '#fff'
          },
          seriesIndex: 0,
        },
        tooltip: { // 提示框
          trigger: 'item',
          backgroundColor: 'transparent',
          formatter: params => { // 提示框浮层内容格式器
            if (params.seriesIndex || !params.data) return ''
            let data = params
            return `<div class="chart_tip_4f795181">
                      <div class="chart_tip_4f795181_title">${data.name}</div>
                      <div class="chart_tip_4f795181_text">参保人数 <span unit="人">${data.data.insured}</span></div>
                      <div class="chart_tip_4f795181_text">基金收入 <span unit="万元">${data.data.fundInTotal}</span></div>
                      <div class="chart_tip_4f795181_text">基金支出 <span unit="万元">${data.data.fundOutTotal}</span></div>
                      <div class="chart_tip_4f795181_text">案件数 <span unit="件">${data.data.caseCount}</span></div>
                      <div class="chart_tip_4f795181_text">事故率 <span unit="">${data.data.accidentRate}%</span></div>
                    </div>`
          },
        },
        geo: [
          {
            map: mapName,
            aspectScale: .85,
            layoutCenter: ['50%', '45%'],
            layoutSize: '100%',
            zoom: mapSize,
            itemStyle: {
              areaColor: 'transparent',
              borderWidth: 0,
              opacity: 0.8,
              borderColor: 'transparent'
            },
            label: {
              show: true,
              color: 'transparent',
              fontSize: '15',
              formatter: params => {
                let str = params.name;
                data.map(item => {
                  if(item.name == params.name) {
                    if(item.mark && item.mark == '城区') {
                      str = '';
                    } else {
                      str += '(' + item.value + ')';
                    }
                  }
                })
                return str;
              },
            },
            selectedMode: false,
            emphasis: {
              label: {
                color: '#fff',
                fontSize: '15',
              },
              itemStyle: {
                areaColor: 'rgba(47, 190, 211,1 )',
                borderWidth: 2,
                borderColor: '#8DE4F1',
              },
            },
            z: 6
          },{
            map: special,
            aspectScale: .85,
            layoutCenter: ['50%', '45%'],
            layoutSize: '100%',
            zoom: mapSize,
            itemStyle: {
              areaColor: '#10244D',
              borderWidth: 1,
              opacity: 0.8,
              borderColor: '#68ABC6'
            },
            label: {
              show: true,
              color: '#fff',
              fontSize: '15',
              formatter: params => {
                let str = params.name;
                data.map(item => {
                  if(item.name == params.name) {
                    if(item.mark && item.mark == '城区') {
                      str = '';
                    } else {
                      str += '(' + item.value + ')';
                    }
                  }
                })
                return str;
              },
            },
            selectedMode: false,
            emphasis: {
              label: {
                color: '#fff',
                fontSize: '15',
              },
              itemStyle: {
                areaColor: 'rgba(47, 190, 211,1 )',
                borderWidth: 2,
                borderColor: '#8DE4F1',
              },
            },
            z: 5
          }, {
            map: mapLineName,
            aspectScale: .85,
            layoutCenter: ['50%', '45%'],
            layoutSize: '100%',
            zoom: mapSize,
            itemStyle: {
              areaColor: '#0E3870',
              borderColor: '#e5edf1',
              borderWidth: 1.5,
              shadowBlur: 15,
              shadowColor: 'rgba(255,255,255,0.1)',
            },
            silent: true,
            z: 4
          }, {
            map: mapLineName,
            aspectScale: .85,
            layoutCenter: ['50%', '47.5%'],
            layoutSize: '100%',
            zoom: mapSize,
            itemStyle: {
              areaColor: '#6FEEF8',
              borderWidth: 0,
            },
            silent: true,
            z: 3
          }, {
            map: mapLineName,
            aspectScale: .85,
            layoutCenter: ['50%', '49%'],
            layoutSize: '100%',
            zoom: mapSize,
            itemStyle: {
              areaColor: '#3866E2',
              borderWidth: 0,
            },
            silent: true,
            z: 2
          }, {
            map: mapLineName,
            aspectScale: .85,
            layoutCenter: ['50%', '50.5%'],
            layoutSize: '100%',
            zoom: mapSize,
            itemStyle: {
              areaColor: '#273C8C',
              borderWidth: 0,
            },
            silent: true,
            z: 1
          },
        ],
        series: [
          {
            type: 'map',
            geoIndex: 0,
            data: data
          }
        ]
      }
      if (!this.myChart) {
        this.myChart = echarts.init(this.$refs.chartMap)
      }
      let myChart = this.myChart
      // 悬浮窗轮播
      myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: 0
      });
      let idx = 0;
      this.interval = setInterval(() => {
        // 清除之前的高亮
        myChart.dispatchAction({
          type: 'downplay'
        });
        // 当前下标高亮
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: idx
        });
        // 显示信息浮窗
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: idx
        });
        idx++;
        if (idx >= 9) {
          idx = 0;
        }
      }, 2400);
      myChart.setOption(option);
      if (!this.clickFlag) {
        myChart.on('dblclick', function () {
          that.mapShow = true
        })
        myChart.on('click', function (params) {
          let name = 'jh';
          let name2 = 'jh';
          let lineName = 'jhLine';
          let mapSize = 1;
          let sundata = [
            {
              areaCode: '33070201',
              parentCode: '330702',
              name: '城北街道',
              mark: '城区',
            },
            {
              areaCode: '33070201',
              parentCode: '330702',
              name: '城东街道',
              mark: '城区',
            },
            {
              areaCode: '33070201',
              parentCode: '330702',
              name: '城西街道',
              mark: '城区',
            },
            {
              areaCode: '33070201',
              parentCode: '330702',
              name: '城中街道',
              mark: '城区',
            },
            {
              areaCode: '33070201',
              parentCode: '330702',
              name: '江南街道',
              mark: '城区',
            },
            {
              areaCode: '33070201',
              parentCode: '330702',
              name: '三江街道',
              mark: '城区',
            },
            {
              areaCode: '33070201',
              parentCode: '330702',
              name: '西关街道',
              mark: '城区',
            },
          ];
          switch (params.data.areaCode) { // 地图下钻
            case '330702':
              name = 'wucheng';
              name2 = 'wucheng_chengqu';
              lineName = 'wuchengLine';
              mapSize = 0.9;
              sundata: sundata;
              break;
            case '330703':
              name = 'jindong';
              name2 = 'jindong';
              lineName = 'jindongLine';
              mapSize = 0.9;
              break;
            case '330723':
              name = 'wuyi';
              name2 = 'wuyi';
              lineName = 'wuyiLine';
              mapSize = 0.9;
              break;
            case '330726':
              name = 'pujiang';
              name2 = 'pujiang';
              lineName = 'pujiangLine';
              mapSize = 0.9;
              break;
            case '330727':
              name = 'panan';
              name2 = 'panan';
              lineName = 'pananLine';
              mapSize = 0.9;
              break;
            case '330781':
              name = 'lanxi';
              name2 = 'lanxi';
              lineName = 'lanxiLine';
              mapSize = 1.2;
              break;
            case '330782':
              name = 'yiwu';
              name2 = 'yiwu';
              lineName = 'yiwuLine';
              mapSize = 0.9;
              break;
            case '330783':
              name = 'dongyang';
              name2 = 'dongyang';
              lineName = 'dongyangLine';
              mapSize = 0.9;
              break;
            case '330784':
              name = 'yongkang';
              name2 = 'yongkang';
              lineName = 'yongkangLine';
              mapSize = 1;
              break;
          }
          that.echartsMap(sundata, name, lineName, mapSize, name2)
          // 清除之前的高亮
          myChart.dispatchAction({type: 'downplay'});
          // 当前选中区域高亮
          myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            name: params.data.name
          });
          // 停止浮窗显示
          clearInterval(that.interval);
          // 传递选中的统筹区信息
          that.$emit('getAreaCode', params.data.areaCode);
        })
        this.clickFlag = true;
      }
    },
    // 数据初始化--案件数事故率
    initCasesInfo(result) {
      if (result) {
        for (let item of this.mid_top) {
          item.text == '事故率' ? item.data = result.sgl * 100 : '';
          item.text == '案件数' ? item.data = result.ajs : '';
          item.text == '参保人数' ? item.data = result.cbrs : '';
        }
      }
    },
    // 数据初始化--多跨协同
    initCooperation(bureauData) {
      const bureauDataDemo = [
        [{
          bureau: '统计局',
          settleTotal: '11',
          img: require('@/assets/data_right_1.png')
        },
          {
            bureau: '交通运输局',
            settleTotal: '22',
            img: require('@/assets/data_right_2.png')
          },
          {
            bureau: '公安局',
            settleTotal: '31',
            img: require('@/assets/data_right_3.png')
          }],
        [{
          bureau: '司法局',
          settleTotal: '34',
          img: require('@/assets/data_right_4.png')
        },
          {
            bureau: '财政局',
            settleTotal: '31',
            img: require('@/assets/data_right_5.png')
          },
          {
            bureau: '水务局',
            settleTotal: '16',
            img: require('@/assets/data_right_6.png')
          }],
      ];
      this.cooperation = bureauData = bureauData || bureauDataDemo;
      for (let item in bureauData) {
        bureauData[item].img = require('@/assets/data_right_' + (parseInt(item) + 1) + '.png')
      }
    },
    // 数据初始化--工伤联网结算
    initFundSettlement(handleData) {
      const handleDataDemo = [];
      for (let i = 0; i < 10; i++) { // 生成示例数据
        handleDataDemo[handleDataDemo.length] = {
          index: (i + 1),
          name: '诸葛村夫',
          idCard: '332***************9',
          areaCode: '永康市',
          hospital: '浙江大学金华附属人民医院',
          timeSettle: '2021.02.02',
          costSettle: '5600元'
        }
      }

      handleData = handleData || handleDataDemo;

      let arrayTemp = [];
      let arrayTemp2 = [];
      for (let index in handleData) {
        let sunArray2 = []; //小轮播图数据
        sunArray2[sunArray2.length] = handleData[index].name;
        sunArray2[sunArray2.length] = handleData[index].hospital;
        sunArray2[sunArray2.length] = handleData[index].timeSettle;
        arrayTemp2[arrayTemp2.length] = sunArray2;

        let sunArray = []; // 弹框--完整轮播图数据
        sunArray[sunArray.length] = handleData[index].index;
        sunArray[sunArray.length] = handleData[index].name;
        sunArray[sunArray.length] = handleData[index].idCard;
        sunArray[sunArray.length] = handleData[index].areaCode;
        sunArray[sunArray.length] = handleData[index].hospital;
        sunArray[sunArray.length] = handleData[index].timeSettle;
        sunArray[sunArray.length] = handleData[index].costSettle;
        arrayTemp[arrayTemp.length] = sunArray;
      }
      this.cooperationHandle.data = arrayTemp2;
      this.cooperationHandleMax.data = arrayTemp;

      // 初始化表头样式
      let tempHeader = this.cooperationHandleMax.header;
      for (let index in tempHeader) {
        tempHeader[index] = '<span style="font-size: 24px;">' + tempHeader[index] + '</span>';
      }
      // 初始化列表体样式
      let tempArray = this.cooperationHandleMax.data;
      for (let index in tempArray) {
        for (let sunIndex in tempArray[index]) {
          tempArray[index][sunIndex] = '<span style="font-size: 22px;line-height: 50px">' + tempArray[index][sunIndex] + '</span>';
        }
      }
    },
    // 工伤综合查询
    getComplexInfo() {
      const url = api.getComplexInfo;
      let mapPopData = null;
      if (url) {
        let param = {};
        param.year = this.dataYear;
        axios.post(url, param).then(res => {
          if (res.data.code) {
            console.log('初始化图表数据--工伤综合查询--错误!');
            console.log(res.data);
          }
          const result = res.data.result;
          mapPopData = [...result];
          for (let index in result) {
            mapPopData[index].name = result[index].areaName;
          }
          this.getCaseRankArea(mapPopData);
        }).catch(err => {
        });
        this.getCaseRankArea();
      }
    },
    // 事故案件各区域查询
    getCaseRankArea(mapPopData) {
      const wuchengDetail = [
        {
          parentAdCode: '330702',
          name: '城北街道',
          mark: '城区',
        }, {
          parentAdCode: '330702',
          name: '城南街道',
          mark: '城区',
        }, {
          parentAdCode: '330702',
          name: '城中街道',
          mark: '城区',
        }
      ];
      const demoMapPopData = [
        {
          name: '婺城区',
          areaCode: '330702',
          caseCount: 100,
          value: 0,
          accidentRate: 0.0002,
          insured: 200,
          fundInTotal: 100,
          fundOutTotal: 50,
          detail: wuchengDetail
        },
        {
          name: '金东区',
          areaCode: '330703',
          caseCount: 100,
          value: 0,
          accidentRate: 0.0002,
          insured: 200,
          fundInTotal: 100,
          fundOutTotal: 50
        },
        {
          name: '永康市',
          areaCode: '330784',
          caseCount: 100,
          value: 70,
          accidentRate: 1.2,
          insured: 200,
          fundInTotal: 100,
          fundOutTotal: 50
        },
        {
          name: '武义县',
          areaCode: '330723',
          caseCount: 100,
          value: 0,
          accidentRate: 1.2,
          insured: 200,
          fundInTotal: 100,
          fundOutTotal: 50
        },
        {
          name: '浦江县',
          areaCode: '330726',
          caseCount: 100,
          value: 0,
          accidentRate: 1.2,
          insured: 200,
          fundInTotal: 100,
          fundOutTotal: 50
        },
        {
          name: '义乌市',
          areaCode: '330782',
          caseCount: 100,
          value: 55,
          accidentRate: 1.2,
          insured: 200,
          fundInTotal: 100,
          fundOutTotal: 50
        },
        {
          name: '兰溪市',
          areaCode: '330781',
          caseCount: 100,
          value: 55,
          accidentRate: 1.2,
          insured: 200,
          fundInTotal: 100,
          fundOutTotal: 50
        },
        {
          name: '东阳市',
          areaCode: '330783',
          caseCount: 100,
          value: 0,
          accidentRate: 1.2,
          insured: 200,
          fundInTotal: 100,
          fundOutTotal: 50
        },
        {
          name: '磐安县',
          areaCode: '330727',
          caseCount: 100,
          value: 0.5,
          accidentRate: 1.2,
          insured: 200,
          fundInTotal: 100,
          fundOutTotal: 50
        },
      ];
      const url = api.getCaseRankArea;
      if (!url) {
        let param = {};
        param.year = this.dataYear;
        axios.post(url, param).then(res => {
          if (res.data.code) {
            console.log('初始化图表数据--案件区域排名--错误!');
            console.log(res.data);
          }
          const result = res.data.result;
          for (let i in result) {
            for (let j in mapPopData) {
              if (result[i].areaCode == mapPopData[j].name) {
                mapPopData[j].value = mapPopData[j].accidentRate = result[i].accidentRate * 100;
                mapPopData[j].caseCount = result[i].caseCount;
              }
            }
          }
          for (const item of mapPopData) {
            if (item.name == '金华市本级') {
              item.name = item.areaName = '市本级';
            }
          }
          for (const item of mapPopData) {
            item.fundInTotal = (item.fundInTotal / 10000).toFixed(2);
            item.fundOutTotal = (item.fundOutTotal / 10000).toFixed(2);
          }
          this.echartsMap(mapPopData, 'jh', 'jhLine', 1, 'jh');
        }).catch(err => {
        });
      } else {
        mapPopData = demoMapPopData;
        this.echartsMap(mapPopData, 'jh', 'jhLine', 1,'jh');
      }
    },
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  font-family: 微软雅黑;
}

body {
  width: 100%;
  height: 100%;
}

.map {
  height: 55%;
  width: 44%;
  margin: 0 auto;
  background: url("../assets/map_bg.png") no-repeat center;
  overflow: hidden;
  background-size: contain;
  position: absolute;
  z-index: 0;
}

.map-rollback {
  position: absolute;
  z-index: 2;
  top: 222px;
  left: 600px;
  font-size: 20px;
  background-color: #0E3868;
  color: #96ADC3;
}

.screenMenu {
  position: absolute;
  z-index: 1;
  bottom: 230px;
  right: 560px;
  height: 200px;
  width: 140px;
}

.menu_item {
  height: 27px;
  width: 140px;
  margin: 8px 0;
}

.menu_img {
  float: left;
  margin-right: 10px;
  height: 27px;
  width: 27px;
  overflow: hidden !important;
  background-size: cover !important;
}

.menu_text {
  float: left;
  color: #ffffff;
  font-size: 15px;
  line-height: 27px;
}

.data_mid_1 {
  width: 95%;
  height: 10%;
  margin: 0 auto;
}

.data1 {
  float: right;
  height: 90%;
  width: 25%;
}

.data1_right {
  float: left;
  color: #fff;
  width: 64%;
  height: 84%;
  padding-top: 5%;
  color: #FBD533;
  margin-left: 2%;
}

.data1_img {
  float: left;
  height: 90%;
  width: 33%;
  overflow: hidden !important;
  background-size: cover !important;
}

.data1_text1 {
  font-size: .9rem;
  font-weight: 600;
  text-align: left;
  margin-left: 6%;
  margin-top: 5%;
  color: white;
}

.data1_text2 {
  display: inline-block;
  float: left;
  width: 95%;
  height: 60%;
  font-family: LCD2;
  font-size: 1.6rem;
  text-align: left;
  margin-left: 5%;
}

.data1_text5 {
  font-size: .8rem;
}

.data_mid_2 {
  width: 100%;
  height: 26%;
  margin-top: 590px;
}

.data_mid_2_1 {
  float: left;
  width: 50%;
  height: 115%;
}

.data_mid {
  background-color: #025085;
  width: 100%;
  height: 115%;
}

.data_mid_2_2 {
  float: left;
  width: 50%;
  height: 100%;
}

.data2_title {
  background: url("../assets/subtitle_long.png") no-repeat;
  overflow: hidden;
  background-size: cover;
  width: 100%;
  line-height: 180%;
  margin-bottom: 1%;
  margin-top: .5%;
  font-size: 1.4rem;
  font-weight: 600;
  color: #DCF3FF;
}

.data_table {
  width: 100%;
  height: 160px;
}

.btn_bottom :hover {
  color: #F9D494;
}

.middle {
  height: 100%;
  width: 45%;
  margin: 0 auto;
}

.right_data2_box1 {
  height: 21%;
  width: 94%;
  margin-top: 7%;
  margin-left: 6%;
}

.right_data2_item {
  float: left;
  height: 100%;
  width: 30%;
  margin-right: 3%;
}

.right_data2_img1 {
  float: left;
  height: 85%;
  width: 35%;
  overflow: hidden;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.right_data2_img2 {
  float: left;
  margin-top: 1%;
  margin-left: 3%;
  background: url("../assets/subtitle_shortest.png");
  background-size: cover;
  overflow: hidden;
  height: 42%;
  width: 55%;
  color: white;
  font-size: .8rem;
}

.text_white {
  color: white;
  height: 45%;
  width: 45%;
  float: left;
  margin-left: 5%;
  text-align: left;
}

.right_data2_text {
  font-weight: 600;
  font-size: .9rem;
}

main {
  margin: 6% auto;
  height: 81%;
  width: 96%;
}

footer {
  background: url("../assets/footer.png") no-repeat;
  overflow: hidden;
  background-size: cover;
  height: 8.2%;
  width: 100%;
  position: absolute;
  bottom: 0;
}

.yearChange {
  position: absolute;
  z-index: 1;
  top: 220px;
  right: 600px;
  height: auto;
  width: auto;
}

.yearChange >>> .el-select .el-input__inner {
  border-color: #025085;
}

.yearChange >>> .el-input--small .el-input__inner {
  background-color: #0E3868;
  color: #96ADC3;
  font-size: 17px;
  font-weight: 600;
  height: 28px;
}
</style>

<style>
.chart_tip_4f795181 {
  background: url("../assets/tip_bg.png") no-repeat;
  width: 380px;
  height: 256px;
  padding: 34px 58px 44px;
  box-sizing: border-box;
  text-align: left;
}

.chart_tip_4f795181_title {
  color: #CEDEE9;
  font-size: 24px;
  line-height: 36px;
  padding-left: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.chart_tip_4f795181_text {
  color: #C7D8E3;
  font-size: 15px;
  position: relative;
  line-height: 24px;
}

.chart_tip_4f795181_text span {
  font-weight: bold;
  font-size: 20px;
  position: absolute;
  right: 20px;
}

.chart_tip_4f795181_text span:after {
  content: attr(unit);
  position: absolute;
  width: 30px;
  margin-left: 5px;
  font-weight: normal;
  font-size: 15px;
}
</style>

<style>
.el-tabs__item {
  color: #ffffff !important;
}

.el-tabs__item:hover {
  color: #409EFF !important;
}


.dialogBox {
  height: 580px;
  background: url("../assets/bg07.jpg");
}

.selectOption {
  background-color: #0E3868;
  color: #96ADC3;
  border-color: #025085;
  text-align: center;
}
</style>
